<template>
  <div class="app-container">
    <el-form :inline="true" :model="queryParams" ref="queryRef" label-width="80px">
      <el-form-item label="学号">
        <el-input v-model="queryParams.studentNo" placeholder="学号" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="queryParams.name" placeholder="姓名" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="身份证">
        <el-input v-model="queryParams.idCard" placeholder="身份证号" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="电话">
        <el-input v-model="queryParams.phone" placeholder="电话" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="queryParams.status" placeholder="学员状态" clearable>
          <el-option label="在读" value="在读" />
          <el-option label="休学" value="休学" />
          <el-option label="结业" value="结业" />
          <el-option label="退学" value="退学" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['jiaxiao:student:add']">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['jiaxiao:student:edit']">修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['jiaxiao:student:remove']">删除</el-button>
      </el-col>
      <!-- <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['jiaxiao:student:export']">导出</el-button>
      </el-col> -->
      <!-- <el-col :span="1.5">
        <el-upload :action="upload.url" :headers="upload.headers" :on-success="handleImportSuccess" :show-file-list="false" :before-upload="beforeUpload" accept=".xlsx,.xls" v-hasPermi="['jiaxiao:student:import']">
          <el-button type="info" plain icon="el-icon-upload2" size="mini">导入</el-button>
        </el-upload>
      </el-col> -->
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="list" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="学号" prop="studentNo" width="120" />
      <el-table-column label="姓名" prop="name" width="120" />
      <el-table-column label="性别" prop="gender" width="80" />
      <el-table-column label="电话" prop="phone" width="140" />
      <el-table-column label="状态" prop="status" width="100" />
      <el-table-column label="进度" prop="licenseStatus" width="100" />
      <el-table-column label="报名日期" prop="enrollDate" width="140" />
      <el-table-column label="操作" fixed="right" width="220">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="handleUpdate(scope.row)" v-hasPermi="['jiaxiao:student:edit']">修改</el-button>
          <el-button size="mini" type="text" @click="handleChangeStatus(scope.row)" v-hasPermi="['jiaxiao:student:edit']">状态变更</el-button>
          <el-button size="mini" type="text" class="text-danger" @click="handleDelete(scope.row)" v-hasPermi="['jiaxiao:student:remove']">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />

    <el-dialog :title="title" :visible.sync="open" width="600px">
      <el-form ref="formRef" :model="form" label-width="100px">
        <el-form-item label="学号">
          <el-input v-model="form.studentNo" />
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="性别">
          <el-select v-model="form.gender">
            <el-option label="男" value="M" />
            <el-option label="女" value="F" />
          </el-select>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input-number v-model="form.age" :min="0" />
        </el-form-item>
        <el-form-item label="身份证号">
          <el-input v-model="form.idCard" />
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="form.phone" />
        </el-form-item>
        <el-form-item label="住址">
          <el-input v-model="form.address" />
        </el-form-item>
        <el-form-item label="报名日期">
          <el-date-picker v-model="form.enrollDate" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" />
        </el-form-item>
        <el-form-item label="学员状态">
          <el-select v-model="form.status">
            <el-option label="在读" value="在读" />
            <el-option label="休学" value="休学" />
            <el-option label="结业" value="结业" />
            <el-option label="退学" value="退学" />
          </el-select>
        </el-form-item>
        <el-form-item label="进度">
          <el-select v-model="form.licenseStatus">
            <el-option label="报名" value="报名" />
            <el-option label="学习" value="学习" />
            <el-option label="考试" value="考试" />
            <el-option label="待发证" value="待发证" />
            <el-option label="已发证" value="已发证" />
          </el-select>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="form.remark" type="textarea" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="open=false">取消</el-button>
        <el-button type="primary" @click="submitForm">保存</el-button>
      </div>
    </el-dialog>

    <el-dialog title="状态变更" :visible.sync="statusOpen" width="400px">
      <el-form :model="statusForm" label-width="100px">
        <el-form-item label="新状态">
          <el-select v-model="statusForm.toStatus">
            <el-option label="在读" value="在读" />
            <el-option label="休学" value="休学" />
            <el-option label="结业" value="结业" />
            <el-option label="退学" value="退学" />
          </el-select>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="statusForm.remark" type="textarea" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="statusOpen=false">取消</el-button>
        <el-button type="primary" @click="submitStatus">确定</el-button>
      </div>
    </el-dialog>
  </div>
  </template>

<script>
import { listStudent, getStudent, addStudent, updateStudent, delStudent, changeStudentStatus, exportStudent } from '@/api/jiaxiao/student'
import { getToken } from '@/utils/auth'

export default {
  name: 'JxStudent',
  data() {
    return {
      loading: false,
      showSearch: true,
      total: 0,
      list: [],
      single: true,
      multiple: true,
      ids: [],
      queryParams: { pageNum: 1, pageSize: 10, studentNo: undefined, name: undefined, idCard: undefined, phone: undefined, status: undefined },
      title: '',
      open: false,
      form: {},
      statusOpen: false,
      statusForm: { studentId: undefined, toStatus: undefined, remark: '' },
      upload: {
        url: process.env.VUE_APP_BASE_API + '/jiaxiao/student/importData',
        headers: { Authorization: 'Bearer ' + getToken() }
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.loading = true
      listStudent(this.queryParams).then(res => {
        this.list = res.rows
        this.total = res.total
        this.loading = false
      })
    },
    handleQuery() { this.queryParams.pageNum = 1; this.getList() },
    resetQuery() { this.$refs.queryRef && this.$refs.queryRef.resetFields(); this.handleQuery() },
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.studentId)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    handleAdd() { this.title = '新增学员'; this.form = {}; this.open = true },
    handleUpdate(row) {
      const id = row && row.studentId ? row.studentId : this.ids[0]
      getStudent(id).then(({ data }) => { this.form = data; this.title = '编辑学员'; this.open = true })
    },
    submitForm() {
      const req = this.form.studentId ? updateStudent(this.form) : addStudent(this.form)
      req.then(() => { this.$message.success('保存成功'); this.open = false; this.getList() })
    },
    handleDelete(row) {
      const ids = row && row.studentId ? [row.studentId] : this.ids
      this.$modal.confirm('确认删除选中记录吗？').then(() => delStudent(ids.join(','))).then(() => { this.getList(); this.$message.success('删除成功') })
    },
    handleChangeStatus(row) { this.statusForm = { studentId: row.studentId, toStatus: undefined, remark: '' }; this.statusOpen = true },
    submitStatus() {
      changeStudentStatus(this.statusForm.studentId, this.statusForm.toStatus, this.statusForm.remark).then(() => { this.$message.success('状态已更新'); this.statusOpen = false; this.getList() })
    },
    handleExport() {
      this.$download('/jiaxiao/student/export', { ...this.queryParams })
    },
    beforeUpload(file) { return true },
    handleImportSuccess() { this.$message.success('导入成功'); this.getList() }
  }
}
</script>

<style scoped>
.mb8 { margin-bottom: 8px; }
</style>


